<template>
  <div id="incidentTable">
    <div class="incident_table_b">
      <table cellspacing="0">
        <thead>
          <tr>
            <th>日期</th>
            <th v-for="item in thead_b_list" :key="item.id">{{ item }}</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item) in tbody_b_list" :key="item.id">
            <td>{{ item.date }}</td>
            <td>{{ item.groupType }}</td>
            <td v-for="obj in item.list" :key="obj.id">
              <span>{{ obj.value }}</span>
            </td>
            <td @click="goUserList(item)" style="color: #016DFB; cursor: pointer">查看</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  let getGsHead = (arr, vm) => {
    let list = []
    arr.forEach(obj => {
      vm.META_COLUME.forEach(item => {
        if (obj.split('__')[0] === item.meta_id) {
          list[obj.split('__')[2]] = item.colume_chs
        }
      })
    })
    return list
  }

  let eventDataTranslation = (key, vm) => {
    let arr = []
    vm.B020002.forEach(item => {
      if (item.meta_id === key.split('__')[0]) {
        arr.push(item.event_name)
      }
    })
    vm.META_COLUME.forEach(item => {
      if (item.meta_id === key.split('__')[1]) {
        arr.push(item.colume_chs)
      }
    })
    vm.META_TGT.forEach(item => {
      if (item.meta_id === key.split('__')[2]) {
        arr.push(item.tgt_name)
      }
    })
    return arr.join('_')
  }

  export default {
    name: 'incidentTable',
    props: {
      showTable: {
        type: Boolean
      }
    },
    data () {
      return {
        thead_b_list: [],
        tbody_b_list: []
      }
    },
    methods: {
      // 查看
      goUserList (item) {
        let obj = {}
        if (item.group_list) {
          item.group_list.forEach(item => {
            for (let key in item) {
              obj[key] = item[key]
            }
          })
        }
        this.$emit('on-goUserList', obj)
      },
      // 从父组件获取数据
      getdata (object) {
        this.thead_b_list = []
        this.tbody_b_list = []
        let gs = []
        let gf = []
        // 表头
        for (let key in object.data[0]) {
          if (key.indexOf('__GS__') !== -1) {
            gs.push(key)
          }
          if (key.indexOf('__GF__PERCENT__') !== -1) {
            gf.push(key)
          }
        }
        this.thead_b_list.push(getGsHead(gs, this).join(','))
        for (let i = 0; i < gf.length; i++) {
          gf.forEach(key => {
            if (key.indexOf('__GF__PERCENT__' + i) !== -1) {
              this.thead_b_list.push(eventDataTranslation(key, this))
            }
          })
        }
        // 表体
        object.data.forEach(item => {
          let obj = {
            group_list: []
          }
          obj.list = []
          let gs = []
          let gf = []
          for (let key in item) {
            if (key.indexOf('GSD') !== -1) {
              obj.date = item[key]
            }
            if (key.indexOf('__GS__') !== -1) {
              obj.group_list.push({ [key]: item[key] })
              gs[key.split('__')[2]] = item[key]
            }
            if (key.indexOf('__GF__') !== -1) {
              gf.push({ [key]: item[key] })
            }
          }
          obj.groupType = gs.join(',')
          for (let i = 0; i < gf.length; i++) {
            let j = {}
            if (i >= gf.length / 2) {
              break
            }
            gf.forEach(item => {
              for (let k in item) {
                if (k.indexOf('__GF__' + i) !== -1) {
                  j.value = item[k]
                }
                if (k.indexOf('__GF__PERCENT__' + i) !== -1) {
                  j.percentage = item[k]
                  if (j.percentage.indexOf('-') !== -1) {
                    j.boolVal = true
                  } else {
                    j.boolVal = false
                  }
                }
              }
            })
            obj.list.push(j)
          }
          this.tbody_b_list.push(obj)
        })
        // 合计
        object.sum_list.forEach((item, index) => {
          let obj = {}
          let gs = []
          let strGs = []
          for (let key in item) {
            if (key.indexOf('__GS__') !== -1) {
              gs.push({ [key]: item[key] })
            }
            if (key.indexOf('__GF__') !== -1) {
              obj[key] = item[key]
            }
          }
          for (let i = 0; i < gs.length; i++) {
            gs.forEach(item => {
              for (let k in item) {
                if (k.indexOf('__GS__' + i) !== -1) {
                  strGs.push(item[k])
                }
              }
            })
          }
        })
      }
    },
    created () {
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
      this.META_COLUME = this.data.META_COLUME
      this.META_TGT = this.data.META_TGT
      this.B020002 = this.data.B020002
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  #incidentTable
    div[class^="incident_table_"]
      table
        width 100%
        thead
          th
            min-width 150px
            font-weight normal
            font-size 14px
            color #5A5E66
            border-right 0.1px solid #D8DCE5
            border-bottom 0.1px solid #D8DCE5
        td
          text-align center
          padding 0 15px
          font-size 14px
          color #5A5E66
          border-right 0.1px solid #D8DCE5
          border-bottom 0.1px solid #D8DCE5
          span.percentage
            color #67c23a
          span.active
            color #f56c6c
</style>
